מדריך פשוט ליצירת הרשמה בעזרת פייסבוק לאתר שלכם.
כמו שכולכם יודעים, בתקופה האחרונה פייסבוק תפס תאוצה ענקית וכל דבר ברשת כמעט מקושר לפייסבוק.
כמעט לכל בן אדם היום שמשתמש קבוע באינטרנט יש לו פייסבוק, אז למה לסבך להם את החיים עם הרשמות מיותרות אם אפשר להירשם עם הפייסבוק עצמו?
נתחיל ביצירת אפליקצית פייסבוק דרך הקישור הזה,
נלחץ על Create new app, וניתן לה כל שם שנרצה, בנוסף נבחר שאנחנו לא רוצים אחסון בחינם כי אין לנו טעם בזה.
לאחר שיצרנו את האפליקציה יופיע לנו הגדרות האפליקציה - שם האפליקציה, מספר האפליקציה וכו'.
נלחץ על Edit settings ובWebsite with Facebook Login נוסיף את כתובת האתר שלנו.
נלחץ Save changes ונחזור לעמוד הקודם.
מה שעשינו עכשיו היה בעצם יצירת אפליקציה שבעזרתה נרשם, ונתנו לה הרשאות שנוכל להשתמש בה דרך האתר שלנו לצורך ההרשמה.
אז אפליקציה יש לנו, ויש לה אישור להתחבר לאתר שלנו.
מה שעכשיו נשאר לנו, ההרשמה עצמה.
ניצור iframe שהמקור שלו זה
https://www.facebook.com/plugins/registration
עכשיו זה לא מספיק לנו, נצטרך לשלוח למקור שלו גם מידע דרך GET.
לכן נוסיף סימן שאלה ואחריו client_id, הclient_id זה בעצם המספר של האפליקציה שיצרנו, ניקח מהעמוד שהיינו בו קודם, של הפרטים על האפליקציה מהשורה App ID ונשים במקור של הiframe.
בנתיים יש לנו
https://www.facebook.com/plugins/registration?client_id=XXXXXXX
אחרי המספר של האפליקציה, נרצה לבחור לאן לשלוח את הטופס, ACTION כמו כל טופס רגיל.
הטופס של פייסבוק שולח סטרינג שאחר כך נדע לפענח אותו וממנו להוציא את הפרטים של אותו טופס.
לכן, נוסיף למקור הiframe שלנו את הכתובת שנרצה לשלוח את הטופס דרך redirect_uri.
אז עד פה הכתובת שלנו נראה ככה
https://www.facebook.com/plugins/registration?client_id=XXXXXXX&redirect_uri=http://www.abc.def
אז טופס יש לנו, לאן לשלוח את הטופס יש לנו. נשאר לנו השדות של הטופס.
נוסיף לכתובת fields כדי לבחור איזה שדות יהיו לנו בטופס.
בfields נוכל לכתוב כמה דברים
name כדי לבקש את השם של המשתמש.
birthday כדי לבקש את תאריך יום ההולדת של המשתמש.
email כדי לבקש את האימל של המשתמש.
gender כדי לבקש את מין המשתמש.
location כדי לבקש את עיר המגורים של המשתמש.
password כדי לכתוב סיסמא חדשה למשתמש החדש שנרשם, שלא קשורה לפייסבוק.
captcha קוד אבטחה, כדי למנוע בוטים.
כל השדות האלו חוץ מסיסמא וקוד האבטחה יהיו מלאים אוטומטי ברגע שמשתמש אשר מחובר לפייסבוק יתחבר לאתר שלכם.
זהו, סיימנו ליצור את הטופס והכתובת המלאה של הטופס נראת ככה
https://www.facebook.com/plugins/registration?client_id=XXXXXXX&redirect_uri=http://www.abc.def&fields =name,birthday,gender,location,email,password,captcha
עכשיו שסיימנו ליצור את הטופס, נראה לעצב אותו. נוכל לעצב את הiframe בעזרת style פשוט לדוגמא
style="border:black thin solid;"
נוכל גם לקבוע אורך ורוחב בעזרת width="40%" height="600px"
אז זהו, סיימנו ליצור את הטופס ולעצב אותו.
והקוד שלנו נראה ככה
<iframe src="https://www.facebook.com/plugins/registration?
client_id=XXXXX&
redirect_uri=http://abc.def&
fields=name,birthday,gender,location,email,password,captcha"
style="background-color:green;"
width="40%"
height="600px">
</iframe>
client_id=XXXXX&
redirect_uri=http://abc.def&
fields=name,birthday,gender,location,email,password,captcha"
style="background-color:green;"
width="40%"
height="600px">
</iframe>
עכשיו אחרי שיש לנו את הטופס והוא נשלח, נרצה לקבל את המידע מהטופס.
כמו שכתבתי קודם, אנחנו לא נקבל את הקלט של המשתמש ישירות לעמוד, לכן נצטרך "לפענח" אותו.
נלך לredirect_uri שהגדרנו מוקדם בiframe,
ונכתוב מספר פונקציות שפייסבוק נתנה בדוקומנטציה שלה שעליהם אני לא ארחיב עכשיו.
function parse_signed_request($signed_request, $secret) {
list($encoded_sig, $payload) = explode('.', $signed_request, 2);
// decode the data
$sig = base64_url_decode($encoded_sig);
$data = json_decode(base64_url_decode($payload), true);
if (strtoupper($data['algorithm']) !== 'HMAC-SHA256') {
error_log('Unknown algorithm. Expected HMAC-SHA256');
return null;
}
// check sig
$expected_sig = hash_hmac('sha256', $payload, $secret, $raw = true);
if ($sig !== $expected_sig) {
error_log('Bad Signed JSON signature!');
return null;
}
return $data;
}
function base64_url_decode($input) {
return base64_decode(strtr($input, '-_', '+/'));
}
list($encoded_sig, $payload) = explode('.', $signed_request, 2);
// decode the data
$sig = base64_url_decode($encoded_sig);
$data = json_decode(base64_url_decode($payload), true);
if (strtoupper($data['algorithm']) !== 'HMAC-SHA256') {
error_log('Unknown algorithm. Expected HMAC-SHA256');
return null;
}
// check sig
$expected_sig = hash_hmac('sha256', $payload, $secret, $raw = true);
if ($sig !== $expected_sig) {
error_log('Bad Signed JSON signature!');
return null;
}
return $data;
}
function base64_url_decode($input) {
return base64_decode(strtr($input, '-_', '+/'));
}
נבדוק אם הטופס נשלח ואם כן ניצור מערך שיהיה בו את הקלט של המשתמש.
<?php
if(isset($_POST['signed_request']))
{
$registerDetails = parse_signed_request($_POST['signed_request'], XXXX /* כאן אנחנו אמורים לתת לפונקציה גם את הsecret של האפליקציה שלנו */);
}
else
{
echo 'הטופס לא נשלח';
}
?>
if(isset($_POST['signed_request']))
{
$registerDetails = parse_signed_request($_POST['signed_request'], XXXX /* כאן אנחנו אמורים לתת לפונקציה גם את הsecret של האפליקציה שלנו */);
}
else
{
echo 'הטופס לא נשלח';
}
?>
עכשיו אם נרצה להשתמש בקלט של המשתמש דרך המשתנה נבצע את זה דרך האינדקס registration של המערך שיצרנו קודם ואחריו את שם האינפוט של הטופס.
לדוגמא כדי לגשת לשם נרשום
echo $registerDetails['registration']['name'];
זהו, עד כאן המדריך ליצירת טופס הרשמה של פייסבוק. תהנו :)
תגובות לכתבה:
יפה מאוד !
ענקקק תודה !!
ההרשמה באתר הזה עובדת ככה?
כי זה ניראה קצת שונה...
מה לגבי ההתחברות ?